示範Vue.js&JQuery新增修改刪除查詢(修改資料)
24-list.php
<html>
<head>
<meta charset="UTF-8">
<title>示範Vue.js&JQuery新增修改刪除查詢(修改資料)</title>
</head>
<body>
<div id="show">
<table>
<tr>
<th>name</th>
<th>age</th>
<th>email</th>
<th>del</th>
<th>edit</th>
</tr>
<tr v-if="list != null" v-for="item in list">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.email }}</td>
<td><input v-on:click="delItem(item.id)" type="button" value="del"></td>
<td><a :href="editView(item.id)">edit</a></td>
</tr>
<tr v-else>
<td colspan="3">沒有資料</td>
</tr>
</table>
</div>
</body>
<script src="jquery-3.1.1.min.js"></script>
<script src="vue.js"></script>
<script>
// start app
new Vue({
el: '#show',
data: {
list: []
},
mounted: function () {
$.get('get-list.php', function (query) {
this.list = query;
}.bind(this), 'json');
},
methods: {
delItem: function (id) {
$.get('del.php', {id: id}, function (result) {
if (result.success) {
alert('刪除成功');
this.list = result.query;
} else {
alert('刪除失敗');
}
}.bind(this), 'json');
},
editView: function (id) {
return '/vue/24-edit.php?id=' + id;
}
}
})
</script>
</html>
24-edit.php
<html>
<head>
<meta charset="UTF-8">
<title>示範Vue.js&JQuery新增修改刪除查詢(編輯資料)</title>
</head>
<body>
<div id="show">
<div>
name: <input type="text" v-model="name">
</div>
<div>
age: <input type="text" v-model="age">
</div>
<div>
email: <input type="text" v-model="email">
</div>
<input v-on:click="submitFrom()" type="button" value="submit">
<a :href="goToList()">go to list</a>
</div>
</body>
<script src="jquery-3.1.1.min.js"></script>
<script src="vue.js"></script>
<script>
// start app
new Vue({
el: '#show',
data: {
name: '',
age: '',
email: '',
id:<?=$_GET['id']?>
},
mounted: function () {
$.get('get-data.php', {id: this.id}, function (query) {
if (query !== false) {
this.name = query.name;
this.age = query.age;
this.email = query.email;
}
}.bind(this), 'json');
},
methods: {
submitFrom: function () {
var $this = this;
if ($this.name == '' || $this.age == '' || $this.email == '') {
alert('請填寫完整');
} else {
$.get('edit.php', {
name: $this.name,
age: $this.age,
email: $this.email,
id: $this.id
}, function (result) {
console.log(result);
if (result) {
alert('edit成功');
} else {
alert('edit失敗');
}
}, 'json')
}
},
goToList: function () {
return '/vue/24-list.php';
}
}
})
</script>
</html>
get-data.php
<?php
//pdo請自寫
include 'config.php';
include 'pdoClass.php';
if (isset($_GET)) {
$pdo = new pdoClass($config);
echo json_encode($pdo->getData($_GET['id']));
} else {
echo false;
}
edit.php
<?php
//pdo請自寫
include 'config.php';
include 'pdoClass.php';
if (isset($_GET)) {
$pdo = new pdoClass($config);
echo json_encode($pdo->editData($_GET));
} else {
echo false;
}